<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .active {
        background: url(https://img2.baidu.com/it/u=3968920556,174377992&fm=26&fmt=auto);
        background-size: 100vw 100vh;
      }
      .active1 {
        background: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201909%2F16%2F20190916233214_bnefj.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1640332976&t=cede541e89dcf27b7aba1eef9f231cdc);
        background-size: 100vw 100vh;
      }
    </style>
  </head>
  <body>
    <button>皮肤1</button><button>皮肤2</button>
    <script>
      var butEle = document.querySelectorAll("button");
      butEle[0].onclick = function () {
        document.body.className = "active";
      };
      butEle[1].onclick = function () {
        document.body.className = " active1";
      };
    </script>
  </body>
</html>
